﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title th:text="${info?.name?:'未设置名称'}"></title>
    <meta name="keywords" th:content="${info?.keywords?:''}" content="">
    <meta name="description" th:content="${info?.description?:''}" content="">
    <link rel="icon" href="assets/img/img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="assets/css/css/index.css">
    <link rel="stylesheet" type="text/css" href="assets/css/css/animate.css">
</head>
<body>
<div class="case">
    <!-- 头部 -->
    <div id="head">
        <div th:include="pub_head"></div>
        <img src="uploads/20211231/392c11ab762f537923856d8e7d0efc37.jpg" class="banner bans">
    </div>
    <!-- 内容 -->
    <div class="commit_center case allCont">
        <!-- 选项卡 -->
        <div class="flex tab_Fas">
            <p class="xk tab-type" th:attr="mId=${modules[2].module.id}">[[${modules[2].module.title}]]</p>
            <p class="xk tab-type" th:attr="mId=${modules[3].module.id}">[[${modules[3].module.title}]]</p>
        </div>
        <!-- 内容 -->
        <div class="box_list">
            <div class="demand">
                <div class="flex xkImg">
                    <a href="cms_casedetail?id=1">
                        <img src="uploads/20211228/f4baecf1e8f6fae1153094007e3e3dea.png">
                    </a>
                    <a href="cms_casedetail?id=2">
                        <img src="uploads/20211228/44e2bb697f504f894801fd1df14d1eee.png">
                    </a>
                    <a href="cms_casedetail?id=3">
                        <img src="uploads/20211228/72ade5739177d36fb1c8e8019f2881ee.png">
                    </a>
                    <a href="cms_casedetail?id=4">
                        <img src="uploads/20211228/cd278819133cf8b0621b5588d9e27c61.png">
                    </a>
                    <a href="cms_casedetail?id=5">
                        <img src="uploads/20211228/e5e3b617ac52345ada2519cb40fd4dd4.png">
                    </a>
                    <a href="cms_casedetail?id=6">
                        <img src="uploads/20211228/72ade5739177d36fb1c8e8019f2881ee.png">
                    </a>
                </div>
                <!-- 分页 -->
                <ul class="flex tab_Fas sad">
                    <!--<li class="prev"><a href="javascript:(0)" data-value="1" class="page_admin"> < </a></li>-->
                    <li class="all_page" style="width:100%;display: flex;justify-content: center;padding: 0"
                        data-max-page="2" data-now-page="1">
                    </li>
                    <!--<li class="prev"><a href="javascript:(0)" class="page_admin" data-value="2">-->
                    <!--    > </a></li>-->
                </ul>
            </div>
        </div>
    </div>
    <!-- 脚部 -->
    <div th:include="pub_footer"></div>


</div>
<!-- script -->
<script src="assets/js/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/swiper/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>

<!-- wow弹动 -->
<script src="assets/js/js/wow.min.js"></script>
</body>
</html>
<script>
    $(function () {
        let canClick = true
        $('.page_admin').click(function () {
            let page = $(this)[0].dataset.value;
            console.log(page)
            if(!canClick) {
                // alert('清等待')
                return false
            }
            canClick = false
            $.ajax({
                type: "get",
                url: '/index/caseed/index',
                data: {page: page},
                dataType: "json",
                success: function (data) {
                    canClick = true
                    let res = data.data.tops_data;
                    let page_a = data.data.top_page;
                    let html = '';
                    let html_page = '';
                    if (res.length > 0) {
                        res.forEach(item => {
                            html += `
							<a href="casedetail?id=${item.id}">
							<img src="${item.image}" />
							</a>
                    		 `
                        })
                        html_page += `
						<li class="prev"><a href="javascript:(0)" data-value="1" class="page_admin"> 首页< </a></li>
												<li><a href="javascript:(0)" class="xk ss "  disabled> 上一页</a></li>
						                        <li><a href="javascript:(0)" class="xk page_admin" data-value="${page_a.current_page + 1}"> 下一页 </a></li>
                                                <li class="prev"><a href="javascript:(0)" class="page_admin" data-value="${page_a.last_page}"> >尾页 </a></li>
						`
                    } else {
                        html = '<p style="text-align:center;width:100%;line-height:430px;min-height: 430px">—— 暂无数据 ——</p >';
                    }
                    $('.xkImg').html(html);
                    $('#sad').html(html_page);
                }
            });
            return false
        });
    });


</script>
<script>
    $('.tab_Fas p:eq(0)').attr('data-type', 1)
    $('.tab_Fas p:eq(1)').attr('data-type', 2)

    let maxPage = $('li[data-max-page]').attr('data-max-page')
    for (let i = 0; i < maxPage; i++) {
        $(".all_page").append(
            `
                                <span data-page="${i + 1}">${i + 1}</span>
                                `
        )
    }
    let type = 1
    $('.tab-type').click(function () {
        type = $(this).attr('data-type')
        $('.all_page span:eq(0)').css({
            color: 'rgb(0,131,205)'//定义点击颜色
        }).siblings('span').css({
            color: 'inherit'
        })

        //获取moduleId传进去
        getTypeAjax(1,type, $(this).attr('mId'))
    })

    //将分页查询方法提出来
    const getDataOfPage = function () {
        let page = $(this).attr('data-page')
        $('.all_page').attr('data-now-page', page)
        $(this).css({
            color: 'rgb(0,131,205)'//定义点击颜色
        }).siblings('span').css({
            color: 'inherit'
        })

        //获取moduleId
        //判断哪个是选中状态 TODO
        //class为xk tab-type ss 的就是选中状态
        let mId = $(".xk.tab-type.ss").attr("mId");
        getTypeAjax(page,type, mId);
    }

    //分页的单击事件
    $('.all_page span').click(getDataOfPage);


    function getTypeAjax(p,t, moduleId) {
        $('.xkImg').empty()
        //发送请求到后台
        $.get('/cms_case_page', {pageNum: p, type: t, pageSize: 6, moduleId: moduleId}, function (data) {
            let res = data.data;

            let html = '';
            let html_page = '';
            if (res.length > 0) {
                res.forEach(item => {
                    html += `
                                            <a href="casedetail?id=${item.id}">
                                            <img src="${item.imgUrl1}" />
                                            </a>
                                          `
                })
            } else {
                html = '<p style="text-align:center;width:100%;line-height:430px;min-height: 430px">—— 暂无数据 ——</p >';
            }
            $('.xkImg').html(html);
        })
    }

    //页面加载完成后，重新获取一下分页的数据
    $(function () {
        getDataOfPage();
    })

</script>
